<template>
    <div class="white-box config-box" v-loading="loading">
        <detail-item title="商品名称" bottom="24px" :value="objs.product_name" />
        <detail-item title="商品封面图" bottom="24px">
            <div class="img-selects">
                <el-image
                    class="img-selects__pic"
                    :src="proxy.imgUrl + objs.product_img + '!img_400'"
                    :preview-src-list="srcList"
                    fit="cover"
                    v-if="objs.product_img"
                />
            </div>
        </detail-item>
        <detail-item title="商品分类" bottom="24px" :value="objs.cate_title" />
        <detail-item title="颜色分类" bottom="24px" :value="objs.color" />
        <detail-item title="商品规格" bottom="24px" :value="objs.norm + '/' + objs.unit" />
        <detail-item title="商品销量" bottom="24px" :value="objs.sales" />
        <detail-item title="商品等级" bottom="24px">
            <div class="level-table">
                <el-table :data="objs.product_levels" :header-cell-style="{ background: '#F5F7FA' }"
                    element-loading-background="rgba(255, 255, 255, 0.6)">
                    <el-table-column label="等级ID" prop="level_id" width="110"></el-table-column>
                    <el-table-column label="等级名称" prop="level_name"></el-table-column>
                    <el-table-column label="重量(kg)" prop="weight"></el-table-column>
                    <el-table-column label="体积(m³)" prop="volume"></el-table-column>
                </el-table>
            </div>
        </detail-item>
        <detail-item title="运费类型" bottom="24px" :value="objs.freight_type == 0 ? '统一运费' : '运费模板'" />
        <detail-item title="统一运费" bottom="24px" :value="objs.freight" v-if="objs.freight_type == 0" />
        <detail-item title="运费模板名称" bottom="24px" :value="objs.express_title || ''" v-if="objs.freight_type == 1" />
        <detail-item title="添加时间" bottom="24px" :value="objs.created_at_label" />
    </div>
    
    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted } from "vue"
import { useRoute } from "vue-router"
import DetailItem from "@components/DetailItem.vue"
import GoBack from "@components/GoBack.vue"

const route = useRoute()
const { proxy } = getCurrentInstance()

let gid = route.query.gid || ''
onMounted(() => {
    if (gid) {
        getDetail()
    }
})

const loading = ref(false)
const objs = ref({})
const srcList = ref([])
function getDetail() {
    loading.value = true
    proxy.$axios.get('product/common/detail', {
        params: {
            product_common_id: gid
        }
    }).then(res => {
        loading.value = false
        if (res.data.code == 0) {
            let result = res.data.data;
            srcList.value.push(proxy.imgUrl + result.product_img)
            objs.value = result
        } else {
            proxy.$message({message:res.data.msg,type:"error"})
        }
    }).catch(err => {
        loading.value = false
    })
}
</script>
<script>
export default {
    name: "GoodsPublicDetail",
}
</script>

<style lang="less" scoped>
.config-box {
    padding: @padding-xl 0px;
}
</style>